<script setup>
import { ref, onMounted, computed } from 'vue'
import FileTree from './components/tree/FileTree.vue'
import SearchBox from './components/SearchBox.vue'
import SearchResults from './components/SearchResults.vue'
import Settings from './components/Settings.vue'
import { GetConfig, UpdateConfig } from '../wailsjs/go/main/App'

const config = ref({
  targetFolder: '',
  darkMode: false,
  globalHotkey: 'Ctrl+Shift+F',
  autoHide: true,
  hideOnEdge: true
})

const showSettings = ref(false)
const currentPath = ref('')
const originalTargetPath = ref('') // 保存原始目标目录
const searchQuery = ref('')

const themeClass = computed(() => {
  return config.value.darkMode ? 'dark-theme' : 'light-theme'
})

onMounted(async () => {
  try {
    const cfg = await GetConfig()
    if (cfg && typeof cfg === 'object') {
      config.value = { ...config.value, ...cfg }
      const targetFolder = cfg.targetFolder || config.value.targetFolder
      currentPath.value = targetFolder
      originalTargetPath.value = targetFolder // 保存原始目标目录
    }
  } catch (error) {
    console.error('Failed to load config:', error)
  }
})

const toggleTheme = () => {
  config.value.darkMode = !config.value.darkMode
  saveConfig()
}

const saveConfig = async () => {
  try {
    await UpdateConfig(config.value)
  } catch (error) {
    console.error('Failed to save config:', error)
  }
}

const handleConfigUpdate = (newConfig) => {
  config.value = { ...newConfig }
  currentPath.value = newConfig.targetFolder
  originalTargetPath.value = newConfig.targetFolder // 更新原始目标目录
  saveConfig()
}

const handlePathChange = (newPath) => {
  currentPath.value = newPath
}

const handleSearchResultClick = (node) => {
  // 从搜索结果点击事件中提取路径
  if (node && node.path) {
    if (node.isDir) {
      // 如果是文件夹，切换到该路径
      currentPath.value = node.path
    } else {
      // 如果是文件，切换到文件所在的目录
      const parentPath = node.path.substring(0, node.path.lastIndexOf('\\'))
      if (parentPath) {
        currentPath.value = parentPath
      }
    }
  }
}

const handleSearch = (query) => {
  searchQuery.value = query
  // 当搜索清空时，恢复到原始目标目录
  if (!query || query.trim() === '') {
    currentPath.value = originalTargetPath.value
  }
}

const fileTreeRef = ref(null)

const handleRefreshTree = () => {
  if (fileTreeRef.value) {
    fileTreeRef.value.refreshFileTree()
  }
}
</script>

<template>
  <div id="app" :class="themeClass">
    <header class="app-header">
      <div class="header-left">
        <h1 class="app-title">
          <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
            <path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
          </svg>
          Nova Search
        </h1>
      </div>
      <div class="header-right">
        <button @click="toggleTheme" class="theme-toggle" :title="config.darkMode ? '切换到浅色模式' : '切换到深色模式'">
          <svg v-if="config.darkMode" class="icon" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12,8A4,4 0 0,0 8,12A4,4 0 0,0 12,16A4,4 0 0,0 16,12A4,4 0 0,0 12,8M12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z" />
          </svg>
          <svg v-else class="icon" viewBox="0 0 24 24" fill="currentColor">
            <path d="M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.4 6.35,17.41C9.37,20.43 14,20.54 17.33,17.97Z" />
          </svg>
        </button>
        <button @click="showSettings = !showSettings" class="settings-btn" title="设置">
          <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.22,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.22,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.68 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" />
          </svg>
        </button>
      </div>
    </header>

    <main class="app-main">
      <SearchBox 
        @search="handleSearch" 
      />
      
      <!-- 根据搜索状态显示不同组件 -->
      <SearchResults 
        v-show="searchQuery"
        :search-query="searchQuery"
        :current-path="currentPath"
        @item-click="handleSearchResultClick"
        @item-double-click="() => {}"
      />
      
      <FileTree
        v-show="!searchQuery"
        ref="fileTreeRef"
        :current-path="currentPath"
        @path-change="handlePathChange"
        @refresh-complete="() => {}"
      />
    </main>

    <Settings 
      v-if="showSettings"
      :config="config"
      @close="showSettings = false"
      @update="handleConfigUpdate"
      @refresh-tree="handleRefreshTree"
    />
  </div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  overflow: hidden;
}

#app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.light-theme {
  background-color: #ffffff;
  color: #333333;
}

.dark-theme {
  background-color: #1a1a1a;
  color: #ffffff;
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid;
  border-color: var(--border-color);
  background: var(--header-bg);
}

.light-theme .app-header {
  --border-color: #e0e0e0;
  --header-bg: #f8f9fa;
}

.dark-theme .app-header {
  --border-color: #333333;
  --header-bg: #2d2d2d;
}

.header-left {
  display: flex;
  align-items: center;
}

.app-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.header-right {
  display: flex;
  gap: 8px;
}

.theme-toggle,
.settings-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-toggle:hover,
.settings-btn:hover {
  background: var(--hover-bg);
}

.light-theme .theme-toggle:hover,
.light-theme .settings-btn:hover {
  --hover-bg: #e9ecef;
}

.dark-theme .theme-toggle:hover,
.dark-theme .settings-btn:hover {
  --hover-bg: #404040;
}

.icon {
  width: 20px;
  height: 20px;
}

.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
</style>
